<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公式选择与验证</title>
    <style>
        .hidden { display: none; }
    </style>
    <script>
        var selectedFormula = null;

        function submitChoice(choice) {
            selectedFormula = choice;
            document.getElementById('page1').classList.add('hidden');
            document.getElementById('page2').classList.remove('hidden');
        }

        function validateInput() {
            const userInput = parseInt(document.getElementById('userInput').value);
            const userOutput = parseInt(document.getElementById('userOutput').value);
            let isValid = false;

            if (selectedFormula === 'B' && (userInput - 1 === userOutput)) {
                isValid = true;
            }

            if (isValid && selectedFormula === 'B') {
                document.getElementById('result').innerHTML = '<h1>😂你算对了</h1>';
            } else {
                document.getElementById('result').innerHTML = '<h1>😭你算错咯</h1>';
            }
        }
    </script>
</head>
<body>
    <div id="page1">
        <h1>请选择正确的公式：</h1>
        <p>A: a + 1</p>
        <p>B: a - 1</p>
        <p>C: a + 2</p>
        <p>D: a - 2</p>
        <button onclick="submitChoice('A')">A</button>
        <button onclick="submitChoice('B')">B</button>
        <button onclick="submitChoice('C')">C</button>
        <button onclick="submitChoice('D')">D</button>
    </div>

    <div id="page2" class="hidden">
        <h1>请输入值并验证：</h1>
        <div>
            <label for="userInput">输入 (a):</label>
            <input type="number" id="userInput">
        </div>
        <div>
            <label for="userOutput">输出 (结果):</label>
            <input type="number" id="userOutput">
        </div>
        <button onclick="validateInput()">提交</button>
        <div id="result"></div>
    </div>
</body>
</html>